\<template>
  <div id="examinpaper_startContainer" class="container">
    <div class="content">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          class="title"
          style=" font-size: 0.2rem;"
          :to="{ path: '/evaluation_manage/examinpaper_manage_campus' }"
        >试卷管理</el-breadcrumb-item>
        <el-breadcrumb-item class="title" style=" font-size: 0.2rem;">开始测评</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="examinpaper_step">
        <div class="step">
          <div class="step_text" :class="{step_check:step>=1}">
            <div v-if="step==1" class="step_check_current"></div>
          </div>
          <div class="step_line" :class="{step_check:step>=2}"></div>
          <div class="step_text" :class="{step_check:step>=2}">
            <div v-if="step==2" class="step_check_current"></div>
          </div>
          <div class="step_line" :class="{step_check:step>=3}"></div>
          <div class="step_text" :class="{step_check:step>=3}">
            <div v-if="step==3" class="step_check_current"></div>
          </div>
          <div class="step_line" :class="{step_check:step>=4}"></div>
          <div class="step_text" :class="{step_check:step>=4}">
            <div v-if="step==4" class="step_check_current"></div>
          </div>
        </div>
        <div class="step" style="margin-top:0.06rem;">
          <div class="step_name" :class="{step_name_check:step>=1,step_name_current:step==1}">选择孩子</div>
          <div class="step_padding"></div>
          <div class="step_name" :class="{step_name_check:step>=2,step_name_current:step==2}">选择试卷</div>
          <div class="step_padding"></div>
          <div class="step_name" :class="{step_name_check:step>=3,step_name_current:step==3}">进入测评</div>
          <div class="step_padding"></div>
          <div class="step_name" :class="{step_name_check:step>=4,step_name_current:step==4}">提交测评</div>
        </div>
        <selectStudent ref="selectStudent" @ok="selectStudentOk" v-if="step == 1"></selectStudent>
        <selectExaminpaper ref="selectExaminpaper" @ok="selectExaminpaperOk" v-if="step == 2"></selectExaminpaper>
        <startEvaluation ref="startEvaluation"  @ok="startEvaluationOk" v-if="step == 3"></startEvaluation>
        <reportDetail style="margin-top:0.2rem;" ref="reportDetail" v-if="step == 4"></reportDetail>
      </div>
    </div>
  </div>
</template>

<script>
var vm;
import selectStudent from "./common/select_student";
import selectExaminpaper from "./common/select_examinpaper";
import startEvaluation from "./common/start_evaluation";
import reportDetail from "./examinpaper_data_detail";
export default {
  components: {
    selectStudent,
    selectExaminpaper,
    startEvaluation,
    reportDetail
  },
  data: function() {
    return {
      clue: null,
      paper: null,
      step: 1
    };
  },
  methods: {
    campusChange: function(campusId) {
      vm.$refs.selectStudent.campusChange(campusId);
    },
    selectStudentOk(data) {
      vm.step = 2;
      vm.clue = data.clue;
      console.log(vm.clue);
    },
    selectExaminpaperOk(data) {
      vm.paper = data.paper;
      api
        .evaluateReportInfo({
          paperId: vm.paper.paperId,
          userId: vm.clue.studentUserId,
          campusId: vm.$store.state.campusId
        })
        .then(function(data) {
          if (data.resultCode == 2000) {
            if (data.data && data.data != null) {
              if (data.data.status == "2") {
                vm.$alert("该学员已完成本张试卷，请勿重复测评！", "温馨提示", {
                  confirmButtonText: "确定",
                  center: true,
                  callback: action => {}
                });
              } else {
                vm.$confirm("您之前已有答题记录, 是否继续答题?", "温馨提示", {
                  confirmButtonText: "继续答题",
                  cancelButtonText: "重新答题",
                  center: true,
                  showClose: false,
                  type: "warning"
                })
                  .then(e => {
                    vm.goStartEvaluation(data.data, 1);
                  })
                  .catch(e => {
                    vm.goStartEvaluation(null, 2);
                  });
              }
            } else {
              vm.goStartEvaluation(null, 2);
            }
          } else {
            vm.$message.error(data.message);
          }
        });

      console.log(vm.paper);
    },
    startEvaluationOk(data) {
      vm.step = 4;
      vm.$nextTick(function() {
        this.$refs.reportDetail.initData(data.report, true);
      });
    },
    goStartEvaluation(record, saveType) {
      let paras = {
        userId: vm.clue.studentUserId,
        paperId: vm.paper.paperId,
        saveType: saveType,
        campusId: vm.$store.state.campusId
      };
      api.evaluateReportSave(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.step = 3;
          vm.$nextTick(function() {
            vm.$refs.startEvaluation.init({
              clue: vm.clue,
              paper: vm.paper,
              record: record,
              reportId: data.reportId
            });
          });
        } else {
          vm.$message.error(data.message);
        }
      });
    }
  },
  mounted() {
    vm.step = 1;
  },
  created: function() {
    vm = this;
  }
};
</script>
<style lang="scss">
#examinpaper_startContainer {
  .el-form-item__label {
    font-size: 0.16rem;
    color: #666666;
  }

  .el-checkbox__label {
    font-size: 0.16rem;
    color: #666666;
  }

  .el-breadcrumb__separator {
    color: #999999;
  }
  .el-breadcrumb__inner.is-link {
    font-weight: 300;
    color: #333333;
  }
  .el-breadcrumb__inner.is-link:hover {
    color: #3885f8;
  }
  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #3885f8;
  }
  .newclassroomNumber {
    .el-input__inner {
      border-radius: 0.04rem !important;
    }
  }
  .examinpaper_step {
    width: 100%;
    height: 100%;
    margin-top: 0.16rem;
    margin-bottom: 0.15rem;
    font-size: 0.16rem;
    color: #666666;
    .step {
      display: flex;
      justify-content: center;
      align-content: center;
      width: 100%;
      .step_text {
        width: 0.12rem;
        height: 0.12rem;
        border-radius: 50%;
        background: #8c9bb1;
        position: relative;
      }
      .step_padding {
        width: 2.86rem;
        height: 1px;
        background: #f3f6fb;
      }
      .step_name {
        font-size: 16px;
        color: #8c9bb1;
      }
      .step_name_check {
        color: #0e1115;
      }
      .step_name_current {
        color: #3885f8;
      }
      .step_line {
        margin-top: 0.05rem;
        height: 0.02rem;
        width: 3.4rem;
        background: #d7dee8;
      }
      .step_check {
        background-color: #3885f8;
      }
      .step_check_current {
        position: absolute;
        top: -0.04rem;
        left: -0.04rem;
        width: 20px;
        height: 20px;
        background-color: #3885f8;
        border-radius: 50%;
        opacity: 0.3;
      }
    }
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
</style>
